<style>
	.webuploader-pick {
		background: #0619570a !important;
		padding: 0px !important;
	}
	.webuploader-pick-hover {
		color: #0619570a !important;
	}
	#fileName{
		width:400px;
	}
	#fileName p{
		width:350px;
		color: white;
		margin-left: 20px;
	}
</style>

<!--[if lt IE 9]>
<script type="text/javascript" src="/jSignature/libs/flashcanvas.js"></script><![endif]-->

<link href="/webuploader/webuploader.css" type="text/css" rel="stylesheet"/>
<script src="/webuploader/webuploader.js"></script>
<script type="text/javascript" src="/js/register.js"></script>
<div class="pregister-icon"><img src="/module/base/images/28.png" />REGISTER</div>
	<ul class="pregister-form n-box">
		<li class="pregister-form-line"><span>User Name</span><input type="text" name="userName" maxlength="50" placeholder="Please input User Name"/></li>
		<li class="pregister-form-line"><span>Research Interests</span><input type="text" name="interests"  placeholder="Please input Research interests"/></li>
		<li class="pregister-form-line"><span>Company / Institution</span><input type="text" name="company"  placeholder="Please input Company / Institution"/></li>
		<li class="pregister-form-line"><span style="flex: 0 0 388px;margin-left: -70px;">Web Page (Personal or Your Supervisor's)</span><input type="text" name="page"  placeholder="Please input Personal or Your Supervisor's Page"/></li>
		<li class="pregister-form-line"><span>Your Email on the Web Page Provided</span><input type="text" name="email" placeholder="Please input Your Email"/></li>
		<li class="pregister-form-line"><span>Password</span><input type="password" name="password"  placeholder="6-12 characters, only letters and numbers"/></li>
		<li class="pregister-form-line"><span>Confirm Password</span><input type="password" name="passwordCondfirm"  placeholder="Please Confirm Password"/></li>
		<li class="pregister-form-line"><span>Electronic Signature</span><div id="signature" style="width: 100%;height:200px;border:1px solid #1441c1;"></div></li>
		<li class="pregister-form-line pregister-form-code"><span>Verification Code</span><input type="text" name="captcha" placeholder="Please input Verification Code" /><img id="captcha" src="/module/base/images/29.png" /></li>
		<li class="pregister-form-line pregister-form-upload">
			<span style="margin-top: 20px;">Upload Identification Materials</span>
			<div id="userPicker"><img src="/module/base/images/27.png" /></div>
			<div id="fileName"></div>
		</li>
	</ul>
<a href="#" class="pregister-sub"><img src="/module/base/images/20.png" />Submit</a>
<script src="/jSignature/libs/jSignature.min.js"></script>
<script type="text/javascript">
	$(document).ready(function() {
	    $("#signature").jSignature({height:"198px",width:"100%",color:'#fff'})
	})
	//绑定Upload点击事件
	var uploader = WebUploader.create({
		swf:'/webuploader/Uploader.swf',
		server:'/api/uploadfile',
		pick:'#userPicker',
		formData:{"email":""},
		resize:true,
		auto:true,
		fileNumLimit:5,
		duplicate:false,
		accept:{
			title:'Files',
			extensions:'pdf,doc,docx',
			mimeTypes:'application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document'  +',application/pdf'
		}
	});
	uploader.on('uploadSuccess', function(file,data) {
		if(data.length == 0){
			layer.msg("Upload Error,A user can only upload five files !");
			$("#fileName").empty();
			setTimeout(function(){
				var email = $(".pregister-form input[name='email']").val();
				if(email == ''){
					layer.msg("Please input email !");
				}
				if(!validate.email(email)){
					layer.msg("email is nonlicet ！");
				}
			},500);
			uploader.reset();
			ui.shutProcess();
			return;
		}
		if(data.code != null && data.code == '-101'){
			layer.msg("Upload Error,Maximum upload size exceeded !");
			uploader.reset();
			ui.shutProcess();
			return;
		}else{
			layer.msg("Upload Success!");
		}
		uploader.reset();
		ui.shutProcess();
	});
	uploader.on('uploadError', function(file) {
		ui.shutProcess();
		layer.msg("Upload Error!");
	});
	uploader.on('uploadStart', function(file) {
		ui.popProcess();
		if(file != undefined){
			var email = $(".pregister-form input[name='email']").val();
			uploader.options.formData = {"email":email};
		}
	});
	uploader.on('stopUpload', function(file) {
		ui.shutProcess();
	});
	uploader.on('filesQueued', function(file) {
		var count = $("#fileName p").length;
		if(count >= 5){
			uploader.cancelFile(file);
			return false;
		}
		if(file.length > 5){
			uploader.cancelFile(file);
			return false;
		}
		for(var x = 0 ; x < file.length ;x++){
			var name = file[x].name;
			$("#fileName").append("<p>"+name+"</p>");
		}
	});
	//第一次初始化无法点击，延迟刷新即可！
	setTimeout(function(){
		uploader.refresh();
	},1000)
	
	 
</script>
 